<template>
	<view class="container">
		<view class="swiperItem">
			<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
				:dots-styles="dotsStyles" field="content">
				<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
					<swiper-item v-for="(item, index) in info" :key="index">
						<view class="swiper-item" :class="'swiper-item' + index">
							<!-- 绑定image组件的src属性到item.image -->
							<image class="image" :src="item.image" mode="aspectFill" />
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="shopIntro">
			<view class="shopName">
				<text>小王汽车美容店</text>
			</view>
			<view class="shopRate">
				<uni-rate :readonly="true" size="19" :value="2" />
				<text> 2分</text>
				<text>销量：322</text>
			</view>
			<view class="shopTime">
				<text>营业时间：周一至周五</text>
				<text>09:00 - 22:00</text>
			</view>
			<view class="address">
				<text>山阳区人民中路32号</text>
				<uni-icons type="paperplane" size="24" color="#0084FF" @click="viewMap"></uni-icons>
			</view>
			<view class="line"></view>
			<view class="carService">
				<view class="serviceTitle">服务</view>
				<view class="selectService">
					<view class="servicePrice">
						<checkbox @change="checkboxChange" :checked="isChecked" class="checkbox">精洗</checkbox>
						<view class="washCarPrice">
							<text class="discountPrice">优惠价格：￥ 199</text>
							<text class="originalPrice">原价：￥ 299</text>
						</view>
					</view>
					<view class="carServiceIntro">
						服务介绍服务介绍服务介绍服务介绍服务介绍服务介绍服务介绍服务介绍服务介绍服务介绍服务介绍
					</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="serviceEvaluateTitle">服务评价</view>
			<view class="serviceEvaluation" v-for="(item, index) in evaluations" :key="index">
				<view class="avatar">
					<image class="avatarImage" :src="item.avatar" />
				</view>
				<view class="content">
					<view class="user-info">
						<text class="username">{{ item.username }}</text>
						<text class="time">{{ item.time }}</text>
					</view>
					<uni-rate :readonly="true" size="19" :value="item.rate" class="rating" />
					<view class="content">{{ item.content }}</view>
					<view class="images">
						<image v-for="(img, index) in item.imgs" :key="index" class="comment-image" :src="img" />
					</view>
				</view>
			</view>
		</view>
		<view class="floating-bar">
			<view class="icon-text" @click="toggle('bottom')">
				<uni-icons type="headphones" size="22" /> <!-- 耳机图标 -->
				<text class="text">联系客服</text>
			</view>
			<text class="action-btn primary-btn" @click="placeOrder">立即下单</text>
		</view>

		<!-- 联系客服的弹窗 -->
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff" @change="change">
				<view class="popup-content">
					<view class="phone">
						18338350145
					</view>
					<view class="call">
						呼叫
					</view>
					<view class="cancle" @click="closePopup">
						取消
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: [{
						image: '/static/swiper1.png',
					},
					{
						image: '/static/swiper2.png',
					},
					{

						image: '/static/swiper3.png',
					},
					{

						image: '/static/swiper4.png',
					},
					{
						image: '/static/swiper5.png',
					}
				],
				dotStyle: [{
						backgroundColor: 'rgba(0, 0, 0, .3)',
						border: '1px rgba(0, 0, 0, .3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
						selectedBorder: '1px rgba(0, 0, 0, .9) solid'
					}

				],
				current: 0,
				mode: 'default',
				dotsStyles: {},
				swiperDotIndex: 0,
				isChecked: false, // 默认不选中
				evaluations: [{
					avatar: '/static/userImage.png',
					username: '李**',
					rate: 3,
					time: '2024-01-01',
					content: '服务评价内容服务评价内容服务评价内容服务评价内容服务评价内容服务评价内容服务评价内容服务评价内容服务评价内容服务评价内容服务评价内容服务评价内容',
					imgs: ['/static/evaluate1.png', '/static/evaluate1.png']
				}]

			}
		},
		onLoad() {

		},
		methods: {

			change(e) {
				this.current = e.detail.current
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
			viewMap() {
				console.log('点击查看门店位置')
			},
			checkboxChange(e) {
				this.isChecked = e.detail.value; // 切换选中状态
			},
			contactCustomer() {
				// 联系客服的方法
				console.log('联系客服');
			},
			placeOrder() {
				// 跳转到订单页面
				uni.navigateTo({
					url: '/pages/carWash/carWashDetails/carWashOrders/carWashOrders'
				})

			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			showPopup() {
				// 显示弹窗
				this.$refs.popup.open();
			},
			closePopup() {
				// 关闭弹窗
				this.$refs.popup.close();
			}
		}
	}
</script>

<style>
	.swiper-box {
		height: 200px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 225px;
		color: #fff;
	}

	.image {
		width: 376px;
	}

	/* #endif */

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			margin: 0 auto;
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.shopIntro {
		padding: 10px;
		background-color: #fff;
	}

	.shopName {
		width: 123px;
		height: 23px;
		font-size: 16px;
		font-weight: bold;
	}

	.shopRate {
		display: flex;
		/* 启用Flexbox布局 */
		align-items: center;
		/* 垂直居中对齐 */
		justify-content: flex-start;

		/* 水平方向从起始位置开始排列 */
		uni-rate {
			margin-right: 10px;
			/* 给评分和文本之间添加间隔 */
		}
	}

	.shopRate text :nth-child(1) {
		margin-left: 10px;
		/* 根据需要调整间隔大小 */
		color: #6C6C6C;
	}

	.shopTime {
		width: 228px;
		height: 28px;
		margin-top: 5px;
	}

	.address text {
		margin-left: 1px;
	}

	.line {
		margin-top: 10px;
		margin-bottom: 20px;
		border: 1px solid #ECECEC;
	}

	/* 服务 */
	.serviceTitle {
		width: 32px;
		height: 23px;
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 20px;
		margin-left: 10px;
	}

	.selectService {
		margin-left: 10px;
		font-size: 16px;
	}

	.checkbox {
		transform: scale(0.8);
		/* 缩小尺寸 */
		margin-right: 15px;
	}

	.servicePrice {
		display: flex;
		margin-bottom: 10px;
		margin-top: 12px;
	}

	.washCarPrice {
		margin-top: 5px;
		margin-left: 3px;
		font-size: 14px;
		/* 设置字体大小 */
		font-weight: bold;
		width: auto;
	}

	.discountPrice {
		margin-right: 10px;
		/* 在优惠价格和原价之间添加间距 */
		color: #101010;
		/* 可以根据需要设置颜色 */
		font-size: 16px;
		/* 根据需要设置字体大小 */
	}

	.originalPrice {
		text-decoration: line-through;
		/* 划掉原价 */
		color: #EA1703;
		/* 设置字体颜色，可以更浅一些 */
		font-size: 12px;
		/* 设置原价字体大小 */
		margin-right: 10px;
		/* 根据需要调整间距 */
	}

	/* 精洗介绍 */
	.carServiceIntro {
		width: 332px;
		height: 40px;
		font-size: 11px;
		color: #101010;
	}

	/* 服务评价 */
	.serviceEvaluation {
		display: flex;
		margin-top: 20px;
		margin-bottom: 20px;
		margin-left: 10px;
	}

	.serviceEvaluateTitle {
		width: 64px;
		height: 23px;
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 20px;
		margin-left: 10px;
	}

	.avatar {
		margin-right: 10px;
		margin-top: 5px;
	}

	.avatarImage {
		width: 40px;
		/* 头像大小 */
		height: 40px;
		border-radius: 100px;
		/* 圆形头像 */
	}

	.content {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
	}

	.user-info {
		display: flex;
		align-items: center;
		/* 保持垂直居中 */
		justify-content: space-between;
		/* 分散对齐 */
	}

	.nickname {
		margin-right: 10px;
		margin-top: 5px;
		font-weight: bold;
		font-size: 14px;
	}

	.date {
		color: #888;
		font-size: 12px;
	}

	.comment {
		margin-top: 5px;
		margin-bottom: 10px;
		font-size: 11px;
		height: 54px;
		width: 268px;
	}

	.images {
		display: flex;
		/* 使用 Flexbox 布局 */
		flex-wrap: wrap;
		/* 允许内容换行 */
		margin-top: 10px;
		/* 根据需要调整图片区域的上边距 */
	}

	.images image {
		width: 100px;
		/* 评论图片大小 */
		height: 72px;
		margin-right: 23px;
		object-fit: cover;
	}

	/* 如果是最后一张图片，不需要右边距 */
	.images image:last-child {
		margin-right: 0;
	}

	/* 适配小屏幕 */
	@media screen and (max-width: 500px) {
		.images image {
			width: 80px;
			height: 80px;
		}
	}

	/* 悬浮下单 */
	.container {
		position: relative;
		/* 确保子元素的 fixed 定位是相对于这个容器 */
		min-height: 100vh;
		/* 最小高度为视口高度，确保悬浮条在内容较短时也能显示 */
	}

	.floating-bar {
		position: fixed;
		bottom: 1px;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		padding: 10px;
		background-color: #transparent;
		z-index: 999;
		/* 确保悬浮条在最上层 */
	}

	.icon-text {
		display: flex;
		flex-direction: column;
		/* 耳机图标和文字垂直排列 */
		align-items: center;
		/* 中心对齐 */
	}

	.text {
		font-weight: bold;
		font-size: 14px;
		width: 56px;
		height: 20px;
		/* 文字大小 */
	}

	.action-btn {
		padding: 10px 20px;
		/* 文字按钮的内边距 */
		color: #fff;
		/* 文字颜色 */
		background-color: #007aff;
		/* 背景颜色 */
		text-align: center;
		/* 文本居中 */
		border-radius: 5px;
		/* 圆角 */
	}

	.primary-btn {
		background-color: #F44444;
		/* 主要操作按钮的背景颜色 */
	}

	/* 联系客服弹窗 */
	.popup-content {
		height: 150px;
		background-color: #fff;
		z-index: 9999;
		/* 设置较高的 z-index 值 */
	}

	.popup-content>view {
		font-weight: 700;
		height: 98rpx;
		line-height: 100rpx;
		text-align: center;
		border-bottom: 1rpx solid #efefef;
	}
</style>